<template>
  <div class="task-detail-container">
    <el-row :gutter="20">
      <!-- 左侧主要信息区域 -->
      <el-col :span="18">
        <div class="info-section" style="background-color: #e8f5e9; padding: 15px; border-radius: 4px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">客户状态:</span>
                <span class="value">可联</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">客户姓名:</span>
                <span class="value">{{ customerInfo.name }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">性别:</span>
                <span class="value">{{ customerInfo.gender }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">出生日期:</span>
                <span class="value">{{ customerInfo.birthDate }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">婚姻状态:</span>
                <span class="value">{{ customerInfo.maritalStatus }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">证件类型:</span>
                <span class="value">{{ customerInfo.idType }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">证件号码:</span>
                <span class="value">{{ customerInfo.idNumber }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">贷款品牌:</span>
                <span class="value">{{ loanInfo.brand }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">购车品牌:</span>
                <span class="value">{{ loanInfo.carBrand }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">购车型号:</span>
                <span class="value">{{ loanInfo.carModel }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="24">
              <div class="info-item">
                <span class="label">车辆识别码:</span>
                <span class="value">{{ loanInfo.carVIN }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">放款日期:</span>
                <span class="value">{{ loanInfo.loanDate }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">贷款金额:</span>
                <span class="value">{{ loanInfo.loanAmount }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">贷款期限:</span>
                <span class="value">{{ loanInfo.loanTerm }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">合同编号:</span>
                <span class="value">{{ loanInfo.contractNo }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">入案时间:</span>
                <span class="value">{{ loanInfo.entryDate }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">贷款利率(%):</span>
                <span class="value">{{ loanInfo.interestRate }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">所属部门:</span>
                <span class="value">{{ loanInfo.department }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">经销商名称:</span>
                <span class="value">{{ loanInfo.dealerName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">销售代表:</span>
                <span class="value">{{ loanInfo.salesRep }}</span>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <div class="info-item">
                <span class="label">销售电话:</span>
                <span class="value">{{ loanInfo.salesPhone }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">担保人姓名:</span>
                <span class="value">{{ loanInfo.guarantorName }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="info-item">
                <span class="label">担保人电话:</span>
                <span class="value">{{ loanInfo.guarantorPhone }}</span>
              </div>
            </el-col>
          </el-row>

          <!-- 还款信息区域 -->
          <div class="repayment-section">
            <h3>还款账号信息</h3>
            <div class="section-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">账户户名:</span>
                    <span class="value">{{ repaymentInfo.accountName }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">开户银行:</span>
                    <span class="value">{{ repaymentInfo.bank }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">银行卡号:</span>
                    <span class="value">{{ repaymentInfo.accountNumber }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button type="success" size="small" class="custom-button">查看还款方式</el-button>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 资金分配信息 -->
          <div class="fund-section">
            <h3>资金分配信息</h3>
            <div class="section-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">资金分配机构:</span>
                    <span class="value">{{ fundInfo.distributionOrg }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">合作方金融机构:</span>
                    <span class="value">{{ fundInfo.partnerOrg }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">是否直营:</span>
                    <span class="value">{{ fundInfo.isDirect ? '是' : '否' }}</span>
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">原资金类型:</span>
                    <span class="value">{{ fundInfo.originalType }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <span class="label">现资金类型:</span>
                    <span class="value">{{ fundInfo.currentType }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 联系人信息 -->
          <div class="contact-section">
            <div class="section-header">
              <h3>联系人信息</h3>
              <el-button type="primary" size="small" icon="el-icon-plus">新增</el-button>
            </div>
            <el-table :data="contactList" style="width: 100%" border
              :header-cell-style="{ backgroundColor: '#8bc34a', color: '#fff' }">
              <el-table-column prop="name" label="姓名" width="120"></el-table-column>
              <el-table-column prop="role" label="角色" width="120"></el-table-column>
              <el-table-column prop="relationship" label="与借款人关系" width="150"></el-table-column>
              <el-table-column prop="mobilePhone" label="移动电话" width="150"></el-table-column>
              <el-table-column prop="email" label="电话手机号" width="150"></el-table-column>
              <el-table-column prop="homePhone" label="家庭电话" width="150"></el-table-column>
              <el-table-column prop="officePhone" label="办公电话" width="150"></el-table-column>
              <el-table-column label="操作" width="120">
                <template>
                  <el-button type="text" size="small">详情</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
              <el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>

      <!-- 右侧操作区域 -->
      <el-col :span="6">
        <div class="right-panel" style="background-color: #e8f5e9; padding: 15px; border-radius: 4px;">
          <!-- 催收状态 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">催收状态:</span>
              <el-select v-model="detailForm.collectStatus" size="small" placeholder="请选择">
                <el-option label="可联" value="可联"></el-option>
                <el-option label="失联" value="失联"></el-option>
              </el-select>
            </div>
          </div>

          <!-- 联系渠道 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">联系渠道:</span>
              <div class="radio-group">
                <el-radio v-model="detailForm.contactChannel" label="phone">手机</el-radio>
                <el-radio v-model="detailForm.contactChannel" label="wechat">微信</el-radio>
                <el-radio v-model="detailForm.contactChannel" label="other">其他</el-radio>
              </div>
            </div>
          </div>

          <!-- 联系电话 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">联系电话:</span>
              <el-input v-model="detailForm.contactPhone" size="small" class="input-with-border"></el-input>
              <el-button size="mini" type="text" class="phone-number">11/100</el-button>
            </div>
          </div>

          <!-- 是否可联 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">是否可联:</span>
              <div class="radio-group">
                <el-radio v-model="detailForm.isContactable" label="yes">可联</el-radio>
                <el-radio v-model="detailForm.isContactable" label="no">失联</el-radio>
              </div>
            </div>
          </div>

          <!-- 经验原因 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">经验原因:</span>
              <el-select v-model="detailForm.experienceReason" size="small" placeholder="失联无法联系原因">
                <el-option label="失联无法联系原因" value=""></el-option>
              </el-select>
            </div>
          </div>

          <!-- 催收结果 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">催收结果:</span>
              <el-select v-model="detailForm.collectResult" size="small" placeholder="失联">
                <el-option label="失联" value="失联"></el-option>
              </el-select>
            </div>
          </div>

          <!-- 车辆状态 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">车辆状态:</span>
              <div class="radio-group">
                <el-radio v-model="detailForm.carStatus" label="yes">是</el-radio>
                <el-radio v-model="detailForm.carStatus" label="no">否</el-radio>
              </div>
            </div>
          </div>

          <!-- 催收难点 -->
          <div class="right-section">
            <div class="info-item">
              <span class="label required">催收说明:</span>
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows:6 }" placeholder="请输入内容" v-model="textarea2">
              </el-input>
            </div>
          </div>

          <div class="right-section">
            <div class="info-tip">
              号码采集于联系人信息随便复制过来
            </div>
          </div>

          <!-- 底部按钮区域 -->
          <div class="action-buttons">
            <el-button type="success" size="medium" class="full-width-button">保存</el-button>
            <el-button background-color="#fff" size="medium" class="full-width-button">保存并转交他人</el-button>
            <el-button background-color="#fff" size="medium" class="full-width-button">保存并退回任务</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TaskDetail',
  data() {
    return {
      taskId: '',
      textarea2: "",
      detailForm: {
        collectStatus: '可联',
        contactChannel: 'phone',
        contactPhone: '',
        isContactable: 'yes',
        experienceReason: '',
        collectResult: '失联',
        carStatus: 'yes'
      },
      customerInfo: {
        name: this.generateRandomName(),
        gender: '女',
        birthDate: '1996-01-07',
        maritalStatus: '未婚',
        idType: '身份证',
        idNumber: '522427199601072824'
      },
      loanInfo: {
        brand: 'LCV专属贷产品',
        carBrand: '福田汽车',
        carModel: '福田 祥菱V1 1.3L 90马力 2.05米双排载货汽车',
        carVIN: '车(BJ1020V2AVS-04)4875*1620*1920',
        loanDate: '2020-05-16',
        loanAmount: '49000',
        loanTerm: '36',
        contractNo: 'CAGUI202005150030',
        entryDate: '2020-06-22 00:20:01',
        interestRate: '12',
        department: 'CAXN010015',
        dealerName: '威宁县金和汽车销售服务有限公司',
        salesRep: '黄洪艳',
        salesPhone: '15329279066',
        guarantorName: this.generateRandomName(),
        guarantorPhone: this.generateRandomPhone()
      },
      repaymentInfo: {
        accountName: this.generateRandomName(),
        bank: '中国工商银行',
        accountNumber: '6222032406002420078'
      },
      fundInfo: {
        distributionOrg: '长安信托',
        partnerOrg: '中原银行',
        isDirect: true,
        originalType: '道维好车(17)190405I2',
        currentType: '新车自持'
      },
      contactList: [
        {
          name: this.generateRandomName(),
          role: '主申请人',
          relationship: '本人',
          mobilePhone: this.generateRandomPhone(),
          email: this.generateRandomPhone(),
          homePhone: '',
          officePhone: '',
          operator: '好贷',
          operateTime: ''
        },
        {
          name: this.generateRandomName(),
          role: '联系人',
          relationship: '兄弟姐妹',
          mobilePhone: this.generateRandomPhone(),
          email: '',
          homePhone: '',
          officePhone: '',
          operator: '好贷',
          operateTime: ''
        }
      ]
    };
  },
  created() {
    // 从路由参数获取任务ID
    this.taskId = this.$route.params.taskId;
    // 这里可以根据taskId加载详细数据
    console.log('加载任务详情，任务ID:', this.taskId);
  },
  methods: {
    // 生成随机中文姓名
    generateRandomName() {
      const surnames = ['王', '李', '张', '刘', '陈', '杨', '赵', '黄', '周', '吴', '徐', '孙', '胡', '朱', '高', '林', '何', '郭', '马', '罗'];
      const names = ['伟', '芳', '娜', '秀英', '敏', '静', '丽', '强', '磊', '军', '洋', '勇', '艳', '杰', '娟', '涛', '明', '超', '秀兰', '霞', '平', '刚', '桂英', '建华', '文', '华', '金凤', '素华', '春梅', '桂兰'];
      
      const surname = surnames[Math.floor(Math.random() * surnames.length)];
      const name1 = names[Math.floor(Math.random() * names.length)];
      const name2 = Math.random() > 0.5 ? names[Math.floor(Math.random() * names.length)] : '';
      
      return surname + name1 + name2;
    },

    // 生成随机手机号码
    generateRandomPhone() {
      const prefixes = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
      const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];
      const suffix = Math.floor(Math.random() * 100000000).toString().padStart(8, '0');
      return prefix + suffix;
    },

    // 保存任务详情
    saveTaskDetail() {
      // 保存逻辑
    }
  }
};
</script>

<style lang="scss" scoped>
.task-detail-container {
  padding: 15px;

  .info-section,
  .repayment-section,
  .fund-section,
  .contact-section {
    margin-bottom: 20px;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    h3 {
      margin: 0;
    }
  }

  .info-item {
    display: flex;
    margin-bottom: 15px;
    align-items: center;

    .label {
      color: #606266;
      margin-right: 8px;
      min-width: 80px;
      text-align: right;

      &.required::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }

    .value {
      color: #333;
    }
  }

  .custom-button {
    margin-top: 10px;
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;

    .button-tips {
      margin-top: 10px;
      color: #409EFF;
      cursor: pointer;
      text-decoration: underline;
      text-align: center;
    }
  }

  h3 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }

  .el-select {
    width: 100%;
  }

  .right-panel {
    .right-section {
      margin-bottom: 15px;
    }

    .radio-group {
      display: flex;
      flex-wrap: wrap;
    }

    .input-with-border {
      border: 1px solid #f56c6c;
      border-radius: 4px;
    }

    .phone-number {
      position: absolute;
      right: 5px;
      top: 0;
    }

    .date-tag {
      font-size: 12px;
      line-height: 1.5;
    }

    .highlighted-tag {
      margin: 0 5px;
    }

    .info-tip {
      color: #666;
      font-size: 12px;
      margin-top: 5px;
    }

    .full-width-button {
      width: 100%;
    }
  }
}
</style>
